<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1"/>
    <title>Albers USA with TopoJSON</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
    <script type="text/javascript" src="../../lib/topojson.js"></script>

    <style>
        path {
            fill: #ccc;
            stroke: #fff;
            stroke-width: .5px;
        }

        path:hover {
            fill: red;
        }
    </style>
</head>

<body>

<script type="text/javascript">
    var width = 960,
            height = 500;

    var path = d3.geo.path();

    var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

    var g = svg.append('g')
            .call(
                    d3.behavior.zoom()
                            .scaleExtent([1, 10])
                            .on("zoom", zoom)
            );


    d3.json("../../data/us.json", function (error, topology) {
        g.selectAll("path")
                .data(topojson.feature(topology, topology.objects.states).features)
                .enter().append("path")
                .attr("d", path);
    });

    function zoom() {
        g.attr("transform", "translate("
                + d3.event.translate
                + ")scale(" + d3.event.scale + ")");
    }
</script>

</body>

</html>